<template>
  <div class="help" v-wechat-title="title">
    <div class="title">您的建议与反馈</div>
    <van-form @submit="onSubmit">
      <van-field class="content"
        v-model="content"
        name="content"
        placeholder="请输入您的建议与反馈"
        :rules="[{ required: true, message: '请输入您的建议与反馈' }]"
      />
      <div class="title">姓名</div>
      <van-field
        v-model="name"
        name="name"
        placeholder="请输入您的姓名"
        :rules="[{ required: true, pattern: hanzi , message: '请输入您的姓名' }]"
      />
      <div class="title">联系电话</div>
      <van-field
        v-model="mobile"
        name="mobile"
        placeholder="请输入您的联系电话"
        :rules="[{ required: true, pattern: phoneY , message: '请输入您的联系电话' }]"
      />
      <van-field name="city" v-model="city" class="none" />
      <van-field value="意见反馈" name="type" class="none" />
      <van-field name="from" value="手机站" class="none" />
      <van-button round block type="info" native-type="submit" class="tijiao">
        提交
      </van-button>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'help',
  data () {
    return {
      title: '帮助与反馈',
      content: '',
      name: '',
      mobile: '',
      type: '',
      city: this.$store.state.Dcity,
      hanzi: /[\u4e00-\u9fa5]/,
      phoneY: /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/
    }
  },
  methods: {
    onSubmit (values) {
      this.$axios.post(process.env.API_HOST + '/api/vip/feedback', values
      ).then(this.onSubmitSucc)
        .catch(error => console.log(error))
    },
    onSubmitSucc (res) {
      if (res.data.code === 1) {
        this.$toast('提交成功')
        setTimeout(function () {
          this.$router.push('/')
        }, 1000)
      } else {
        this.$toast('请检查网络后重试')
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.help
  width 100%
  padding-left .4rem /* 20/50 */
  padding-right .4rem /* 20/50 */
  .title
    font-size .3rem /* 15/50 */
    font-weight bold
    margin-top .2rem /* 10/50 */
    height .9rem /* 45/50 */
    line-height .9rem /* 45/50 */
  .van-field
    background #F8F8F8
    border-radius .1rem /* 5/50 */
  .content
    height 3rem /* 150/50 */
  .tijiao
    width 100%
    height .9rem /* 45/50 */
    line-height .9rem /* 45/50 */
    background linear-gradient(90deg, #F14510, #EE340F)
    box-shadow 1px 1px 5px 0px rgba(255, 1, 1, 0.42)
    border-radius .1rem /* 5/50 */
    text-align center
    color #fff
    margin-top 2rem
    font-size .4rem /* 20/50 */
    border 0px
</style>
